<template>
  <div class="home">
    
    <p>
      <button @click="toggleCity">{{city}}</button>
    </p>
    <music-item class="item" v-for="item of musics" :key="item.id" :item="item">
    </music-item>
  </div>
</template>

<script>
import axios from 'axios'
import MusicItem from '../components/MusicItem.vue'
import {computed, onMounted, reactive, toRefs} from 'vue'
import {useStore} from 'vuex'
export default {
  name: 'Home',
  components:{
    MusicItem
  },
  setup() {
    const store = useStore()
    const state = reactive({
      musics:[],
      toggleCity(){
        this.$router.push('/city')
      },
      city:computed(()=>{
        return store.state.CityHook.city
      })
    })
    onMounted(()=>{
      // console.log("http");
      axios.get("http://122.112.161.135:3000/top/playlist").then(res=>{
        console.log(res.data.playlists);
        state.musics = res.data.playlists
      })
    })
    
    const refState = toRefs(state)
    return{
      ...refState
    }
  }
}
</script>
